{% extends "base.html" %}

{% block title %}{{ title }}{% endblock %}

{% block head %}
<link href="static/css/vendor/d3-flame-graph.css" rel="stylesheet">
<link href="static/css/flamegraph.css" rel="stylesheet">

<script src="static/js/vendor/d3.js"></script>
<script src="static/js/vendor/d3-flame-graph.js"></script>
<script src="static/js/flamegraph.js"></script>
{% endblock %}

{% block content %}
<div id="wrapper">
    <div id="header">
      <h1>{{ title }}</h1>
      <form id="search-form">
            <button id="reset-zoom-button" type="button">Reset zoom</button>
            <div class="separator"></div>
            <input id="search-input" type="text" placeholder="Filter...">
            <button id="clear-button" type="button">Clear</button>
        </form>
    </div>
    <div id="chart"></div>
    <div id="extras">
      {% for extra_line in extras %}
      <p>{{ extra_line }}</p>
      {% endfor %}
    </div>
    <div id="details"></div>
</div>

<script>
renderFlamegraph({{ data_json|safe }}, {{ display_bytes|json }});
</script>
{% endblock %}
